<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三个课堂小案例</title>
    <style>
      table{
        border: 1px black solid;
      }
      td{
        border: 1px solid blue;
      }
    </style>
</head>
<body>
  <button type="button" name="b" onclick="changeColor()">给表格添加颜色</button>
  <table>
    <tr>
      <td>500</td>
      <td>500</td>
      <td>500</td>
    </tr>
    <tr>
      <td>500</td>
      <td>500</td>
      <td>500</td>
    </tr>
    <tr>
      <td>500</td>
      <td>500</td>
      <td>500</td>
    </tr>
    <tr>
      <td>500</td>
      <td>500</td>
      <td>500</td>
    </tr>
    <tr>
      <td>500</td>
      <td>500</td>
      <td>500</td>
    </tr>
  </table>
  <input type="checkbox" onclick="chooseAll()" id="sa">选中全部选项
  <br/>
  <div>
    <input type="checkbox" name="products" value="自行车">自行车
    <input type="checkbox" name="products" value="电视机">电视机
    <input type="checkbox" name="products" value="洗衣机">洗衣机
    <input type="checkbox" name="products" value="大美女">大美女
  </div>
  <button type="button" id="but" onclick="addHefty()">添加黄网链接</button>
  <div>
    <a target="_blank">黄色网站</a>
  </div>
</body>
</html>
<script>
  function changeColor(){
    let line = document.getElementsByTagName("tr");
    for (let i = 0; i < line.length; i++) {
      if(i%2 == 0){
        line[i].style.backgroundColor = "pink";
      }else {
        line[i].style.backgroundColor = "blue";
      }
    }
  }
  function chooseAll() {
    let b = document.getElementById("sa");
    let products = document.getElementsByName("products");
    for (let product of products) {
      product.checked = b.checked;
    }
  }
  function addHefty() {
    let line = document.getElementsByTagName("a");
    for (let lineElement of line) {
      lineElement.href = "https://baike.baidu.com/item/%E9%BB%84%E8%89%B2%E7%BD%91%E7%AB%99/389303?fr=aladdin";
    }
  }
</script>